<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 150px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 问题  每次走剩余路程的十分之一  发现到达不了目标位置  
        // 目标  503  初始值 200 
        // 第一次 (503-200) / 10  = 30.3
        // 元素 到达 230.3的位置 
        // 设置left 为230.3 
        // 第二次 (503-230.3) / 10 = 27.27
        // 元素到达  230.3+27.27 = 257.57 

        // 往下除 始终有小数点    到达不了目标 


        // 解决方案  :
            // 解决有小数点的问题   
            // 方案 取整  

        // 取整  
        //  向上取整   向下取整  

        // 如果向反方向移动   
        // 向正方向移动  

        // 加入向上取整    往反方向走    比如运动距离  是    -0.9
        // 向上取整    得到0  方向就变了  


        // 所以我们不能选择向上取整   向下取整  
        // ele 哪个元素移动
        // type 怎么移动  
        // target 什么时候停止   

        function move(ele,type,target,t=50){
            // 减速
            // 始终走剩余路程的十分之一 
            var timer = setInterval(()=>{
                // 每次都获取元素当前的位置 

                var current = parseInt(window.getComputedStyle(ele)[type]);

                // 每次运动的距离  (目标-元素新的位置)  /  10
                var duration = (target-current)/10;

                // 为了避免 剩余的路程的十分之一有小数点始终到不了目标  

                // 取整操作   
                // 如果反方向运动  向下取整   
                // 正方向  向上取整  
                // 1.9 -> 2
                // -1.9 -> -2
                duration = duration>0?Math.ceil(duration):Math.floor(duration)
                if(current == target){
                    clearInterval(timer)
                }
                else{
                    // 元素新的位置 = 之前的位置+移动的距离
                    ele.style[type] = current+duration + 'px';
                }
                
            },t)
        }


        document.querySelector('div').onclick = function(){
            // move(this,'left',503);
            // move(this,'width',503);
            move(this,'top',503);


        }



        // 透明度  
        // opacity    0-1 
        // 0 完全透明  1 完全不透明  


        // 解决方案  :
            // 拿到 元素的透明度  得到的 是 [0,1] 不取整数 而是放大100倍 
            // 设置值得时候  缩小100倍 再设置  

            // 比如 获取透明度 是  0.6 
            // 0.6 *100 60 让60渐变  会看到过度效果  
            // 60 渐变到50  

            // 设置的时候  50 / 100 再设置给元素  
    </script>

</body>

</html>
